<template>
  <div>
     <div id="pie" style="width: 800px; height: 400px; margin: 20px auto;"></div>
  </div>
</template>
<script>
export default {
  mounted(){
    this.makePieChart();
  },
   methods:{
    makePieChart(){
      // 1.初始化echarts实例
      let mycharts=this.$echarts.init(document.getElementById('pie'))

      // 2.指定图表的配置项和数据
      let option={
        title:{ //标题组件
          text:"班级性别分布",
        },
        legend:{},//图例组件
        tooltip:{},//提示框组件
        gird:{},//直角坐标系内绘图网格
        series:[{
            type:"pie",
            center:["30%", "50%"],//饼图的中心（圆心）坐标
            radius:["50%","70%"],//饼图的半径。内圆的半径 和外圆的半径
            data:[
              {name:"男",value:20},
              {name:"女",value:30},
              {name:"未知",value:10}
            ]
         }]
      }
      // 3.使用刚指定的配置项和数据显示图表
      mycharts.setOption(option)
    }
    }
  
}
</script>c